<template>
  <div>
    <p>appName:{{ appName }} 版本号：{{ appNameWithVersion }}</p>
    <p>userName: {{ userName }} 第一个字母：{{ firstUserName }}</p>
    <button @click="handleChangeAppNme">修改appName</button> &nbsp;
    <button @click="handleChangeAppNmeObj">对象传参修改appName</button> &nbsp;
    <button @click="handleQueryV">查询版本号</button> &nbsp;
    <button @click="handleChangeUserName">修改用户名</button> &nbsp;
    <button @click="handleQueryAppName">获取系统名称</button> &nbsp;
    <button @click="handleQueryAppUserName">获取系统和用户名称</button> &nbsp;
    <button @click="todoModule">动态注册模块</button> &nbsp;
    <button @click="todoModuleUser">动态注册user模块</button>
    <p> version: {{ appVersion }}</p>
    <p v-for="(td, index) in todoList" :key="index">{{td}}</p>
    <p v-for="(td, index) in todoUserList" :key="index">{{td}}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import state from "../../store/state";
export default {

  computed: {
    ...mapState({
      appName: state => state.appName,
      userName: state => state.user.userName,
      appVersion: state => state.appVersion,
      todoList: state => state.todo ? state.todo.todoList : [],
      todoUserList: state => state.user.todoUser ? state.user.todoUser.todoUserList : []
    }),
    ...mapGetters([
      'appNameWithVersion',
      'firstUserName'
    ])
  },
  methods: {
    ...mapMutations([
      'SET_APP_NAME',
      'SET_OBJ_APP_NAME',
      'SET_USER_NAME'
    ]),
    ...mapActions([
      'updateAppName',
      'updateUserName'
    ]),
    handleChangeAppNme () {
//        this.$store.commit('SET_APP_NAME','newAppName')
      this.SET_APP_NAME('newAppName')
    },
    handleChangeAppNmeObj () {
//        this.$store.commit({
//          type: 'SET_OBJ_APP_NAME',
//          appName: 'newObjAppName'
//        })
      this.SET_OBJ_APP_NAME({
        appName: 'newObjAppName'
      })
    },
    handleQueryV () {
      this.$store.commit('SET_APP_VERSION')
    },
    handleChangeUserName() {
      // this.$store.state.user.userName = 'hehe'  //错误修改方式  配合严格模式测试
      this.SET_USER_NAME('fengxi wang')
    },
    handleQueryAppName() {
      this.updateAppName()
//        this.$store.dispatch('updateAppName')
    },
    handleQueryAppUserName() {
      this.updateUserName()
    },
    todoModule() {
      this.$store.registerModule('todo', {
        state: {
          todoList: [
            '学习store',
            '学习mutations',
            '学习actions'
          ]
        }
      })
    },
    todoModuleUser() {
      this.$store.registerModule(['user','todoUser'], {
        state: {
          todoUserList: [
            '学习 User-store',
            '学习 User-mutations',
            '学习 User-actions'
          ]
        }
      })
    }
  }
}
</script>
